<template>
  <Container class="rebate-checks-list">
    <div class="container-header large" slot="header">
      <Form class="search">
        <Row>
          <Col span="8">
            <FormItem label="所在区域" placeholder="选择区域">
              <AreaSelect @input="selectProvince" :isChangeOnSelect="true" v-model="list.form.addressArr"></AreaSelect>
            </FormItem>
            <FormItem label="门店">
              <StoreSelect v-model="list.form.storeId" :src="src" 
              :distributorId="list.form.distributorId" :provinceId="list.form.provinceId" 
              :cityId="list.form.cityId" :areaId="list.form.areaId"
            ></StoreSelect>
            </FormItem>
            <!-- <FormItem label="门店名称">
              <Input v-model.trim="list.form.storeName" placeholder="门店名称" :maxlength="20" @on-enter="onSearchBtnClick"/>
            </FormItem> -->
          </Col>
          <Col span="7">
            <FormItem label="经销商">
              <DistributorSelect ref="distributor-select" v-model="list.form.distributorId" :provinceId="list.form.provinceId" 
              :cityId="list.form.cityId" :areaId="list.form.areaId"></DistributorSelect>
            </FormItem>
            <FormItem label="审核状态">
              <SelectList listType="integralAuditStatus" :clearable="false" v-model="list.form.auditStatus"/>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="审核时间">
              <DatePicker v-model="list.form.date" type="daterange" placement="bottom-end" placeholder="请选择审核日期" style="width: 200px"></DatePicker>
            </FormItem>
          </Col>
          <Col class-name="search" span="2">
            <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick"></Button>
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <TabPane label="积分奖励审核" name="tab1">
        <homeTable
          :list="list"
          @getData="getData"
          @onPageSizeChange="onPageSizeChange"
          @onPageChange="onPageChange"
        />
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import SelectList from '@/components/SelectList'
import DistributorSelect from '~/DistributorSelect'
import StoreSelect from '~/StoreSelect'
import AreaSelect from '@/components/AreaSelect'
import IntegralAuditData from './list/IntegralAuditData'
import homeTable from '@/components/homeTable'
import { clearEmpty, formatDate } from '@/util'
export default {
  name: 'welfare/integralaudit/list',
  components: {
    homeTable,
    SelectList,
    DistributorSelect,
    StoreSelect,
    AreaSelect
  },
  data() {
    return {
      tab: "tab1",
      list: IntegralAuditData,
      src: '/common/store/listStores',
      sourceOrderId: this.$route.query.sourceOrderId || null
    }
  },
  mounted() {
    this.list.currentPage =  ~~this.$route.query.currentPage || 1
    this.getData()
  },
  destroyed() {
    this.$bus.$off();
  },
  methods: {
    onSearchBtnClick() {
      let arr = this.list.form.addressArr
      if (arr.length) {
        this.list.form.provinceId = arr[0]
        this.list.form.cityId = arr.length > 1 ? arr[1] : null
        this.list.form.areaId = arr.length > 2 ? arr[2] : null
      } else {
        this.list.form.provinceId = null
        this.list.form.cityId = null
        this.list.form.areaId = null
      }
      this.list.currentPage = 1
      this.getData();
    },
    getData() {
      this.list.status = "loading";
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        areaId: this.list.form.areaId ? this.list.form.areaId : null,
        cityId: this.list.form.cityId ? this.list.form.cityId : null,
        provinceId: this.list.form.provinceId ? this.list.form.provinceId : null,
        distributorId: this.list.form.distributorId,
        storeId: this.list.form.storeId,
        auditStatus: this.list.form.auditStatus,
        sourceOrderId: this.sourceOrderId
      };
      if (this.list.form.date.length && this.list.form.date[0] && this.list.form.date[1]) {
        param.beginAuditDate = formatDate(this.list.form.date[0]) + ' 00:00:00'
        param.endAuditDate = formatDate(this.list.form.date[1]) + ' 23:59:59'
      }
      param = clearEmpty(param)
      this.$ajaxGet("/assets/store_reward/integral/page", param).then(data => {
        this.list.data = []
        this.list.totalItem = Number(data.response.total)
        this.list.data = (data.response.records || [])
        this.list.status = "pass"
      }).catch(() => {
        this.list.status = "error"
      })
    },
    selectProvince(item) {
      if (item.length) {
        this.list.form.provinceId = item[0]
        this.list.form.cityId = item.length > 1 ? item[1] : null
        this.list.form.areaId = item.length > 2 ? item[2] : null
      } else {
        this.list.form.provinceId = null
        this.list.form.cityId = null
        this.list.form.areaId = null
        this.list.form.distributorId = null // 所在区域删除之后，经销商也要清楚
        this.$refs['distributor-select'].remote()
      }
    },
    onPageChange(number) {
      this.list.currentPage = number
      this.getData()
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.getData()
    }
  }
};
</script>
